<template>
    <div class="content">
        <h1 class="text-center">三、税金计算</h1>
        <el-row :gutter="20" class="mt30">
            <el-col :span="12">项目名称：{{ project.title }}</el-col>
            <el-col :span="12" class="text-right">合同完工期{{ project.end_date }}</el-col>
        </el-row>
        <div class="text-right mt15">
            <el-button size="small" type="primary" @click="onInsert">添加</el-button>
            <el-button size="small" type="primary" @click="onSave">保存</el-button>
        </div>
        <el-table class="mt20" :data="tableData" :border="true" style="width: 100%">
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column label="项目名称" show-overflow-tooltip>
                <template #default="scope">
                    <el-text v-if="scope.row.is_system">{{ scope.row.title }}</el-text>
                    <el-input v-else size="small" v-model="scope.row.title" />
                </template>
            </el-table-column>
            <el-table-column label="基数" show-overflow-tooltip width="160">
                <template #default="scope">
                    <el-input-number v-model="scope.row.price" size="small"/>
                </template>
            </el-table-column>
            <el-table-column label="费率%" show-overflow-tooltip width="160">
                <template #default="scope">
                    <el-input-number v-model="scope.row.rate" size="small" @change="onChange(scope.$index)" />
                </template>
            </el-table-column>
            <el-table-column prop="total" label="单位" show-overflow-tooltip />
            <el-table-column prop="total" label="合计" show-overflow-tooltip />
            <el-table-column label="备注" show-overflow-tooltip>
                <template #default="scope">
                    <el-input size="small" v-model="scope.row.remarks" />
                </template>
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip>
                <template #default="scope">
                    <el-button size="small" v-if="!scope.row.is_system" link type="primary" @click="onDelete(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import http from '../../../../util/request';
import { ElMessage } from 'element-plus';
const indexMethod = (index: number) => {
  return index+= 1
}
let project:any = sessionStorage.getItem('project')
project = JSON.parse(project)

interface Info {
    title:string
    remarks:string
    total:number
    price:number
    rate:number
    type:string
    is_system:number
}

const Info = ref<Info>({
    title:'/',
    remarks:'/',
    total:0,
    price:0,
    rate:1,
    type:'taxes',
    is_system:0
})

const tableData = ref<any[]>([])

const onGetData = () => {
    http.post('/projectCost',{type:'taxes'}).then((response:any)=>{
        if(!response.data.data.length){
            tableData.value = [
                {title:'销项税金',price:0,rate:0,total:0,remarks:'',is_system:1,type:'taxes'},
                {title:'进项税金',price:0,rate:0,total:0,remarks:'',is_system:1,type:'taxes'},
                {title:'增值税附加税',price:0,rate:0,total:0,remarks:'',is_system:1,type:'taxes'},
                {title:'印花税（建安）',price:0,rate:0,total:0,remarks:'',is_system:1,type:'taxes'},
                {title:'印花税（购销）',price:0,rate:0,total:0,remarks:'',is_system:1,type:'taxes'},
                {title:'企业所得税',price:0,rate:0,total:0,remarks:'',is_system:1,type:'taxes'},
                {title:'外经证',price:0,rate:0,total:0,remarks:'',is_system:1,type:'taxes'},
                {title:'个人所得税',price:0,rate:0,total:0,remarks:'',is_system:1,type:'taxes'},
            ]
            return
        }
        tableData.value = response.data.data
    })
}

const onSave = () => {
    tableData.value.forEach((element:Info) => {
        if(element.title == ''){
            ElMessage.error('请输入设计容量')
            return;
        }
        if(element.price == 0){
            ElMessage.error('请输入价格')
            return;
        }
        if(element.rate == 0){
            ElMessage.error('请输入费率')
            return;
        }
    });
    let cost:any = JSON.stringify(tableData.value)
    http.patch('/projectCost',{cost:cost}).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg)
            return;
        }
        onGetData()
    })
}

const onChange = (index:number) => {
    tableData.value[index].total = (tableData.value[index].rate / 100 * tableData.value[index].price ).toFixed(2)
}

const onDelete = (index:number) => {
    tableData.value.splice(index, 1);
}

const onInsert = () => {
    let data:string = JSON.stringify(Info.value)
    tableData.value.push(JSON.parse(data))
}

onMounted(()=>{
    onGetData()
})
</script>

<style scoped>

</style>